<template>
	<view>
		<!-- 主体 -->
		<view class="page page-bottom-bar book-hotel">
			<!-- 入住信息 -->
			<view class="book-info p25">
				<view class="font15">{{billInfo.hotel ? billInfo.hotel.name : ''}}</view>
				<view class="font13">
					<image class="icon-date" mode="widthFix" src="https://static.newbeaconhotels.com/app/hotel/icon-date.png"></image>
					<text class="font-969696">入住：</text><uni-dateformat class="format" :date="calendar.startDate" format="yyyy-MM-dd"></uni-dateformat>
					<text class="font-969696">离店：</text><uni-dateformat class="format" :date="calendar.endDate" format="yyyy-MM-dd"></uni-dateformat>
					<text class="font-969696">共{{calendar.dayCount}}晚</text>
				</view>
				<view class="font13 font-969696">
					<image class="icon-lan" mode="widthFix" src="https://static.newbeaconhotels.com/app/hotel/icon-lan.png"></image>
					<text>{{billInfo.hotel ? billInfo.hotel.addrd : ''}}</text>
				</view>
			</view>
			<view class="hr7"></view>
			<!-- 订单信息 -->
			<view class="book-detail font14">
				<view class="item">
					<view>{{roomName}}</view>
					<uni-number-box v-model="form.rmnum" :min="1" :max="maxRoomNum" @change="roomNumChange"></uni-number-box>
				</view>
				<view class="item" @click="Onman">
					<view>入住人</view>
					<view>{{form.rsvman}}　{{form.mobile ? form.mobile : '请选择'}}<uni-icons type="arrowright" size="10" color="#3f3f3f"></uni-icons></view>
				</view>
				<view class="item">
					<view>本年剩余订房次数</view>
					<view>{{billInfo.owner ? (billInfo.owner.night_count + '次') : '暂无'}}</view>
				</view>
			</view>
			<view class="hr7"></view>
			<!-- 备注 -->
			<view class="book-memo p25">
				<view class="font14">备注</view>
				<textarea :value="form.remark" @input="Onremark" placeholder="请输入备注内容" placeholder-class="placeholderClass"></textarea>
			</view>
			<view class="hr7"></view>
			<!-- 说明 -->
			<view class="book-tip p25">
				<view class="font13 font-646464">说明：</view>
				<view class="nodes font11 font-646464">
					<rich-text :nodes="billInfo.hotel.pay_explain"></rich-text>
				</view>
			</view>
		</view>
		
		<!-- 合计信息 -->
		<view class="book-bar flex-row-between flex-start">
			<view class="part1 flex-column-center flex-start">
				<view class="font12">订单金额: <text class="font16 font-assist">￥{{billInfo.all ? billInfo.all : '暂无'}}</text></view>
			</view>
			<view class="btn tc font15 font-ffffff" @click="submit">提交订单</view>
		</view>
		
		<!-- 确认弹窗 -->
		<uni-popup ref="confirm" type="center">
			<view class="popup-prize">
				<view class="title font15 tc font-b">订单确认</view>
				<view class="content">
					<view class="font14 font-ff3c37 tc">
						<text v-if="form.channel == 'YT'">卡类型：业主卡；</text>
						<text>订单总额：￥{{billInfo.all}}</text>
					</view>
					<view class="font12 font-969696">在线支付订单不支持修改；到店支付订单会员保留房至当天18:00</view>
				</view>
				<view class="flex-row-between">
					<view class="btn btn1" @click="cancel">取消</view>
					<view class="btn btn2" @click="confirm">确定</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				themeColor: '#03004c',
				isLogin: false, // 是否已成功获取用户信息
				billInfo: {}, // 账单信息
				calendar: { startDate: '', endDate: '', dayCount: '' }, // 日期
				maxRoomNum: 10, // 最大预订数
				roomName: '',// 房间名称
				form: {
					hotel_id: '',
					date: '',
					day_count: '',
					room_id: '',
					rmnum: 1,
					rsvman: '',
					mobile: '',
					remark: '',
				},
			}
		},
		onLoad: function (options) {
			// 从缓存中拿取查询条件
			let JsonData = uni.getStorageSync('bookQuery')
			if (JsonData) {
				if (JsonData.calendar) {
					this.calendar = JsonData.calendar
					this.form.date = this.$base.formatTime(new Date(JsonData.calendar.startDate), 'yyyy-MM-dd')
					this.form.day_count = JsonData.calendar.dayCount
				}
				if (JsonData.hotel_id) {
					this.form.hotel_id = JsonData.hotel_id
				}
				if (JsonData.room_id) {
					this.form.room_id = JsonData.room_id
				}
				if (JsonData.room_name) {
					this.roomName = JsonData.room_name
				}
			}
			
			// 获取用户信息
			this.$Http({
				url: 'user',
				token: true
			}).then(res => {
				if (res.code == 1) {
					this.isLogin = true
					
					// 获取账单
					this.getBill()
				} else {
					uni.showToast({ title: res.msg, icon: none })
				}
			});
			
			// 开启监听选择联系人
			uni.$on('chooseMan', (res) => {
				this.form.rsvman = res.name
				this.form.mobile = res.mobile
				// 获取账单
				this.getBill()
			})
		},
		onUnload() {
			// 关闭监听选择联系人
			uni.$off('chooseMan')
		},
		methods: {
			// 房间数change
			roomNumChange (e) {
				if (parseInt(e) >= this.maxRoomNum) {
					uni.showToast({ title: '超出预订房间数', icon: 'none'});
					return
				}
				this.form.rmnum = parseInt(e)
				
				if (this.isLogin) {
					// 获取账单
					this.getBill()
				}
			},
			// 备注
			Onremark (e) {
				this.form.remark = e.detail.value
			},
			// 选择联系人
			Onman () {
				uni.navigateTo({
					url: '/pages/owner/contactList?mode=choose'
				});
			},
			// 获取账单
			getBill () {
				this.$Http({
					url: 'ownerBill',
					token: true,
					data: this.form
				}).then(res => {
					if (res.code == 1) {
						this.billInfo = res.data
					} else {
						uni.showToast({  title: res.msg, icon: 'none' });
					}
				});
			},
			// 提交表单
			submit () {
				if (this.billInfo.all) {
					this.$refs.confirm.open()
				} else {
					uni.showToast({ title: '请选择业主', icon: 'none' })
				}
			},
			// 弹窗取消
			cancel () {
				this.$refs.confirm.close()
			},
			// 弹窗确定订单
			confirm () {
				this.$Http({
					url: 'ownerOrderAdd',
					token: true,
					load: true,
					data: this.form
				}).then(res => {
					if (res.code == 1) {
						uni.showToast({  title: '预订成功' });
						setTimeout(()=>{
							uni.reLaunch({ url: 'pages/owner/orderList' })
						}, 2000)
					} else {
						uni.showToast({  title: res.msg, icon: 'none' });
					}
				});
			},
		}
	}
</script>

<style lang="less">
	@import url("../hotel/style.less");
</style>
